<template>
    <view>
        <view class="report_detail">
            <view class="preview">
                <template v-if="fileList && fileList.length > 0">
                    <view style="width: 710rpx">
                        <u--text margin="0 0 8px 0" :text="detail.title" />
                        <u-album
                            singleSize="710rpx"
                            singleMode="widthFix"
                            multipleSize="204rpx"
                            space="36rpx"
                            :urls="
                                fileList
                                    .filter((fileitem) =>
                                        isImage(fileitem.fileUrl)
                                    )
                                    .map((fileItem) => fileItem.fileUrl)
                            "
                        ></u-album>

                        <template v-for="file in fileList">
                            <view
                                style="
                                    display: flex;
                                    flex-direction: column;
                                    margin-top: 40rpx;
                                "
                                v-if="!isImage(file.fileUrl)"
                                :key="file.reportCode"
                            >
                                <!-- <u-button :text="'预览'+ file.fileName" :plain="true" color="#588BF3"
									:customStyle="button2"  /> -->
                                <view
                                    class="previewButton"
                                    @click="previewFile(file)"
                                    >{{ "预览" + file.fileName }}</view
                                >
                            </view>
                        </template>
                    </view>
                </template>
            </view>
            <view class="bottom">
                <u-button
                    text="删除"
                    color="#588BF3"
                    shape="circle"
                    :customStyle="button1"
                    @click="openModal"
                />
            </view>
        </view>
        <u-modal
            title="确定要删除报告？"
            :show="showModal"
            @cancel="showModal = false"
            :asyncClose="asyncClose"
            closeOnClickOverlay
            @confirm="deleteConfirm"
            showCancelButton
        >
            <view style="text-align: center; color: #ccc; font-size: 24rpx">
                删除后无法恢复
            </view>
        </u-modal>
    </view>
</template>

<script>
import { reportBaseUrl } from "../../config/tendIdConfig";
export default {
    data() {
        return {
            showModal: false,
            asyncClose: false,
            button1: {
                fontSize: "32rpx",
                color: "#333",
                width: "468rpx",
                marginBottom: "20rpx",
            },
            button2: {
                fontSize: "32rpx",
                color: "#588BF3",
                width: "468rpx",
                marginBottom: "20rpx",
            },
            // fileUrl: '',
            // previewItem: {},
            reportCode: "",
            fileList: [],
            detail: {},
        };
    },
    computed: {
        isImage() {
            return (fileUrl) => {
                // 判断文件类型是否为图片
                return fileUrl.toLowerCase().match(/\.(jpg|jpeg|png|gif|bmp)$/);
            };
        },
    },
    onLoad(options) {
        this.reportCode = options.reportCode;
    },
    onShow() {
        this.getDetail(this.reportCode);
    },
    methods: {
        deleteConfirm() {
            const that = this;
            this.asyncClose = true;
            uni.request({
                url:
                    reportBaseUrl +
                    "/web/other_report/delete?reportCode=" +
                    that.reportCode,
                method: "POST",
                header: {
                    H5accessToken: that.$store.state.reportToken,
                },
                data: {},
                success(result) {
                    console.log(result);
                    if (result.data.code === 200) {
                        uni.showToast({
                            title: "删除成功",
                            icon: "success",
                            complete() {
                                uni.navigateBack();
                            },
                        });
                    } else {
                        uni.showToast({
                            title: result.data.msg,
                            icon: "none",
                        });
                    }
                },
                complete() {
                    that.asyncClose = false;
                },
            });
        },
        openModal() {
            this.showModal = true;
        },
        download(fileUrl) {
            if (this.isImage) {
                this.downloadImage();
            } else {
                uni.setClipboardData({
                    data: fileUrl,
                    success() {
                        uni.showToast({
                            title: "已拷贝,请到浏览器下载",
                        });
                    },
                });
            }
        },
        downloadFile(fileUrl) {
            // const fileUrl = this.fileUrl; // 替换成你的文件 URL
            uni.downloadFile({
                url: fileUrl,
                success: (res) => {
                    if (res.statusCode === 200) {
                        const filePath = res.tempFilePath;
                        this.saveFile(filePath);
                    }
                },
                fail: (err) => {
                    console.error("下载文件失败", err);
                },
            });
        },
        saveFile(filePath) {
            uni.saveFile({
                tempFilePath: filePath,
                success: (res) => {
                    const savedFilePath = res.savedFilePath;
                    console.log("文件已保存", savedFilePath);
                },
                fail: (err) => {
                    console.error("保存文件失败", err);
                },
            });
        },
        downloadImage() {
            const imageUrl = this.fileUrl; // 替换成你的图片 URL
            uni.downloadFile({
                url: imageUrl,
                success: (res) => {
                    if (res.statusCode === 200) {
                        const imagePath = res.tempFilePath;
                        this.saveImageToPhotosAlbum(imagePath);
                        uni.showToast({
                            title: "已保存到相册",
                        });
                    }
                },
                fail: (err) => {
                    console.error("下载图片失败", err);
                },
            });
        },
        saveImageToPhotosAlbum(imagePath) {
            uni.saveImageToPhotosAlbum({
                filePath: imagePath,
                success: () => {
                    console.log("图片已保存到相册");
                },
                fail: (err) => {
                    console.error("保存图片到相册失败", err);
                },
            });
        },

        previewFile({ fileUrl }) {
            if (!fileUrl) {
                return false;
            }
            uni.showLoading({
                title: "加载中...",
            });

            // 单次下载允许的最大文件为 200MB
            uni.downloadFile({
                url: fileUrl,
                success: function (res) {
                    console.log(res, "wx.downloadFile success res");
                    if (res.statusCode != 200) {
                        uni.hideLoading();
                        return false;
                    }
                    var Path = res.tempFilePath; //返回的文件临时地址，用于后面打开本地预览所用
                    uni.openDocument({
                        filePath: Path,
                        showMenu: true,
                        success: function (res) {
                            uni.hideLoading();
                        },
                    });
                },
                fail: function (err) {
                    console.log(err, "wx.downloadFile fail err");
                    uni.hideLoading();
                },
            });
        },
        getDetail(reportCode) {
            const that = this;
            uni.request({
                url: reportBaseUrl + "/web/other_report/reportDetail",
                method: "GET",
                header: {
                    H5accessToken: that.$store.state.reportToken,
                },
                data: {
                    reportCode,
                },
                success(result) {
                    console.log(result);
                    if (result.data.code === 200) {
                        that.detail = result.data.data;
                        that.fileList = result.data.data.fileList;
                    } else {
                        uni.showToast({
                            title: result.data.msg,
                            icon: "none",
                        });
                    }
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.report_detail {
    width: 100%;
    height: 100vh;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .preview {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .previewButton {
        width: 700rpx;
        padding: 10rpx;
        border-radius: 10rpx;
        box-sizing: border-box;
        border: 1px solid #588bf3;
        font-size: 26rpx;
        text-align: center;
    }

    .bottom {
        width: 100%;
        min-height: 136rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 32rpx;
        padding-bottom: 0;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
        border-top: 1px solid #e5e5e5;

        .share {
            width: 190rpx;
            height: 88rpx;
            border-radius: 50px;
            overflow: hidden;
            font-size: 32rpx;
            background-color: rgba(88, 139, 243, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
